<template>
  <div class="container mt-4">
    <div class="row">
      <!-- 患者总数量 -->
      <div class="col-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">患者总数量</h5>
            <p class="card-text">{{ totalPatients }}</p>
          </div>
        </div>
      </div>
      <!-- 患者年龄分布 -->
      <div class="col-8">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">患者年龄分布</h5>
            <canvas id="ageDistributionChart"></canvas>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <!-- 入院时间统计 -->
      <div class="col-6">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">入院时间分布</h5>
            <canvas id="admissionTimeChart"></canvas>
          </div>
        </div>
      </div>
      <!-- 性别比例统计 -->
      <div class="col-6">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">性别比例</h5>
            <canvas id="genderDistributionChart"></canvas>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <!-- 疾病分类统计 -->
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">疾病分类统计</h5>
            <canvas id="diseaseCategoryChart"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import Chart from 'chart.js/auto';

export default {
  name: 'PatientDataStatistics',
  setup() {
    const totalPatients = ref(100); // 示例总患者数量

    const renderAgeDistributionChart = () => {
      const ctx = document.getElementById('ageDistributionChart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['0-10', '11-20', '21-30', '31-40', '41-50', '51-60', '60+'],
          datasets: [{
            label: '人数',
            data: [10, 15, 20, 25, 30, 10, 5],
            backgroundColor: 'rgba(75, 192, 192, 0.6)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    };

    const renderAdmissionTimeChart = () => {
      const ctx = document.getElementById('admissionTimeChart').getContext('2d');
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06'],
          datasets: [{
            label: '入院人数',
            data: [5, 10, 15, 20, 18, 22],
            fill: false,
            borderColor: 'rgba(54, 162, 235, 1)',
            tension: 0.1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    };

    const renderGenderDistributionChart = () => {
      const ctx = document.getElementById('genderDistributionChart').getContext('2d');
      new Chart(ctx, {
        type: 'pie',
        data: {
          labels: ['男性', '女性'],
          datasets: [{
            label: '性别比例',
            data: [60, 40],
            backgroundColor: ['rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)'],
            borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)'],
            borderWidth: 1
          }]
        }
      });
    };

    const renderDiseaseCategoryChart = () => {
      const ctx = document.getElementById('diseaseCategoryChart').getContext('2d');
      new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: ['心脏病', '糖尿病', '高血压', '呼吸系统疾病', '癌症'],
          datasets: [{
            label: '疾病分类',
            data: [25, 15, 30, 20, 10],
            backgroundColor: [
              'rgba(255, 206, 86, 0.6)',
              'rgba(75, 192, 192, 0.6)',
              'rgba(153, 102, 255, 0.6)',
              'rgba(255, 159, 64, 0.6)',
              'rgba(255, 99, 132, 0.6)'
            ],
            borderColor: [
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
              'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 1
          }]
        }
      });
    };

    onMounted(() => {
      renderAgeDistributionChart();
      renderAdmissionTimeChart();
      renderGenderDistributionChart();
      renderDiseaseCategoryChart();
    });

    return {
      totalPatients
    };
  }
}
</script>

<style scoped>
@import "/src/assets/bootstrap.min.css";
/* 卡片的基本样式 */
.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-bottom: 20px;
}
.card-body{
  padding: 10px;
}
/* 标题的样式 */
.card-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 图表容器的样式 */
canvas {
  max-height: 300px;
  margin: 0 auto;
}

/* 容器的边距 */
.container {
  padding: 15px;
}
</style>
